<template>
  <div class="login">
   <van-nav-bar
    title="用户登录"
  />
  <van-form  @failed="onFailed"
  @submit="onFailed"
  >
  <!-- <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form> -->
<van-cell-group>
<!-- 输入手机号，调起手机号键盘 -->
<!-- trim是为了防止左右有空格 -->
<!-- van-field 就是input输入框 -->
<!-- pattern表示正则 -->
<van-field
v-model.trim="user.mobile" type="tel" label="手机号"
:rules="[{ pattern:/^1\d{10}$/, message: '请输入正确内容' }]"
/>
<!-- 输入密码 -->
<van-field v-model.trim="user.code" type="password" label="密码"
:rules="[{ pattern:/^\d{6}$/, message: '请输入正确的密码' }]"
/>
 </van-cell-group>
  <!-- 按钮 -->
  <!-- @click="hLogin" -->
  <!-- 在form表单 -->
<div class="btn-warp">
<van-button type="info">用户登录</van-button>
</div>
</van-form>
<van-button @click="getUserInfo">测试 获取用户信息</van-button>
  </div>
</template>

<script>
import { login, getProfile } from '../../api/user'
// import ajax from '../../utils/request.js'
export default {
  name: 'Login',
  data () {
    return {
      user: {
        mobile: '13912345678', // 初始账号
        code: '246810' // 初始密码
      }
    }
  },
  methods: {
    // 2、表单验证
    // 验证成功
    submit () {
      console.log('验证成功')
      this.hLogin()
    },
    // 验证失败
    onFailed () {
      console.log('验证失败')
      this.hLogin()
    },
    async getUserInfo () {
      const res = await getProfile()
      console.log(res)
    },
    async hLogin () {
      try {
      // 1、收集用户信息
        console.log(this.user)
        // loading效果
        this.$toast.loading({
          duration: 0, // 持续展示 toast,永远不会关闭,但是它会被后续的toast覆盖
          overlay: true, // 整体添加一个遮罩
          message: '加载中...'
        })
        // 3、发请求
        const res = await login(this.user.mobile, this.user.code)
        console.log(res)
        this.$toast.success('欢迎' + this.user.code)
        // 4、根据请求的返回结果，做后续的处理
        // 登录成功，把token保存在vuex中
        // 在.vue中调用mSetTokenInfo这个mutations
        this.$store.commit('mSetTokenInfo', res.data.data)
        // 5、再发请求，把个人信息也去回来，保存在vuex
        const userInfo = await getProfile()
        console.log('userInfo', userInfo)
        // 把userInfo保存在vuex中
        this.$store.commit('userInfo/mSetUserInfo', userInfo.data.data)
        // 跳到主页
        this.$router.push('/')
      } catch (err) {
        console.log(err)
        this.$toast.fail('登录失败了')
      }
    }
  }
}
</script>

<style lang='less' scoped>
 .login .btn-warp {
  padding: 0 20px; // 内边距空20px
   button {
     width: 100%; // 按钮最大就可以
     background-color: #6db4fd;
     color:#fff;
   }
 }
</style>
